<template>
  <view class="wrap">
    <view class="top">
      <view class="noticeTitle">{{ equipmentName }}</view>
      <view style="margin-top: 5vh;font-size: 13pt;font-weight: bold;">设备编号：{{ equipmentNum }}</view>
      <view style="border-radius:5px;height: 70vh;border: black 1px solid;font-size: 13pt;overflow-y: auto;margin-top: 2vh">
        <rich-text :nodes="equipmentUsageRegulations" disabled="disabled"></rich-text>
      </view>
        <view class="uni-form-item uni-column" v-if="attachmentUrl!=''">
          <view class="title" style="font-size: 13pt;font-weight: bold;margin-top: 20px">查看附件</view>
          <view style="color: blue;margin-top: 1vh" v-for="(item,index) in attachmentNames"><a @click="openFile(item,index)">{{item}}</a></view>
      </view>
  </view>
  </view>
</template>

<script setup>
import { onMounted,ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const equipmentName = ref('')
const equipmentNum = ref('')
const attachmentUrl = ref('')
const attachmentNames = ref('')
const equipmentUsageRegulations = ref('')
onLoad((options) => {
  equipmentName.value = options.equipmentName
  equipmentNum.value = options.equipmentNum
  equipmentUsageRegulations.value = options.equipmentUsageRegulations
  attachmentUrl.value = options.attachmentUrl.split(',')
  attachmentNames.value = options.attachmentNames.split(',')
  console.log(attachmentUrl)
});

function openFile(item,index){
  console.log(index)
  uni.showToast({
    title: '正在打开',
    mask: false,
    icon: "loading",
    duration:20000
  });
  uni.downloadFile({
    url: 'http://39.105.221.189:7009'+attachmentUrl.value[index],
    success: function (res) {
      var filePath = res.tempFilePath;
      uni.openDocument({
        filePath: filePath,
        fileType: 'pdf',
        showMenu: true
      });
      uni.hideToast();
    }
  });
}

</script>

<style lang="scss" scoped>
.noticeTitle{
  text-align: center;
  font-weight: bold;
  font-size: 20pt;
}
.wrap {
  background-color: #f2f2f2;
  .top {
    background-color: #ffffff;
    border-top: solid 2rpx $u-border-color;
    padding: 22rpx;
    .item {
      display: flex;
      font-size: 32rpx;
      line-height: 100rpx;
      align-items: center;
      border-bottom: solid 2rpx $u-border-color;
      .left {
        width: 180rpx;
      }
      input {
        text-align: left;
      }
    }

    .address {
      padding: 20rpx 0;
      textarea {
        // width: 100%;
        height: 150rpx;
        background-color: #f7f7f7;
        line-height: 60rpx;
        margin: 40rpx auto;
        padding: 20rpx;
      }
    }
    .site-clipboard {
      padding-right: 40rpx;
      textarea {
        // width: 100%;
        height: 150rpx;
        background-color: #f7f7f7;
        line-height: 60rpx;
        margin: 40rpx auto;
        padding: 20rpx;
      }
      .clipboard {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        color: $u-tips-color;
        height: 80rpx;
        .icon {
          margin-top: 6rpx;
          margin-left: 10rpx;
        }
      }
    }
  }
  .bottom {
    margin-top: 20rpx;
    padding: 40rpx;
    padding-right: 0;
    background-color: #ffffff;
    font-size: 28rpx;
    .tag {
      display: flex;
      .left {
        width: 160rpx;
      }
      .right {
        display: flex;
        flex-wrap: wrap;
        .tags {
          width: 140rpx;
          padding: 16rpx 8rpx;
          border: solid 2rpx $u-border-color;
          text-align: center;
          border-radius: 50rpx;
          margin: 0 10rpx 20rpx;
          display: flex;
          font-size: 28rpx;
          align-items: center;
          justify-content: center;
          color: $u-content-color;
          line-height: 1;
        }
        .plus {
          //padding: 10rpx 0;
        }
      }
    }
    .default {
      margin-top: 50rpx;
      display: flex;
      justify-content: space-between;
      border-bottom: solid 2rpx $u-border-color;
      line-height: 64rpx;
      .tips {
        font-size: 24rpx;
      }
      .right {
      }
    }
  }
}
</style>
